<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <title>告警处理</title>
  </head>
  <body>
    <div class="container">
      <h4 style="text-align: center;">告警处理</h4>
      <table class="table table-bordered table-sm table-hover">
        <thead class="thead-light">
          <tr>
            <th>供应商</th>
            <th>短信类型</th>
            <th>来源</th>
            <th>账号</th>
            <th>状态&操作</th>
          </tr>
        </thead>
        <tbody>
            <#list dataList as item>
              <tr id="${item.id}">
                <td>${item.supplier}</td>
                <td>${item.smsType}</td>
                <td>${item.source}</td>
                <td>${item.account}</td>
                <td id="operate_${item.id}">
                    <#if item.status == 1>
                        <span id="status_${item.id}" class="badge badge-pill badge-success">已启用</span>
                        <button id="btn_${item.id}" type="button" class="btn btn-danger btn-sm" onclick="setStatus('${item.id}', 0)">停用</button>
                    </#if>
                    <#if item.status != 1>
                        <span id="status_${item.id}" class="badge badge-pill badge-danger">已停用</span>
                        <button id="btn_${item.id}" type="button" class="btn btn-success btn-sm" onclick="setStatus('${item.id}', 1)">启用</button>
                </#if>
                </td>
              </tr>
            </#list>
        </tbody>
      </table>
    </div>
  </body>

  <script type="text/javascript">

    function refreshData(id, status){
        $("#operate_"+id).html();
        if(status == 1){
            $("#operate_"+id).append('<span id="status_' + id + '" class="badge badge-pill badge-success">已启用</span>' +
                         '<button id="btn_' + id + '" type="button" class="btn btn-danger btn-sm" onclick="setStatus(\'' + id + '\', 0)">停用</button>');
        }else{
            $("#operate_"+id).append('<span id="status_' + id + '" class="badge badge-pill badge-danger">已停用</span>' +
                         '<button id="btn_' + id + '" type="button" class="btn btn-success btn-sm" onclick="setStatus(\'' + id + '\', 1)">启用</button>');
        }
    }

    //设置状态
    function setStatus(id, status){
        if(id == undefined || id == ""){
            alert("参数[id]错误:" + id);
        }
        if(status == undefined || status == ""){
            alert("参数[status]错误:" + status);
        }

        jQuery.ajax({
            url: "",
            type: "",
            data: {},
            dataType: "json",
            async: false,
            success: function(result){
                if(result.code == 200){
                    var data = result.data;
                    refreshData(data.id, data.status);
                }else{
                    alert("系统处理出错!");
                }
            }
        });
    }

  </script>

</html>